<template>
  <el-menu
      class="el-menu-vertical-demo"
      background-color="#FFFFFF"
      text-color="#303133"
      active-text-color="#ffd04b"
      :default-active="activeMenu"
      @select="handleSelect"
  >
    <el-menu-item index="thing">
      <el-icon :size="16">
        <OfficeBuilding/>
      </el-icon>
      岗位管理
    </el-menu-item>
    <el-menu-item index="resume">
      <el-icon :size="16">
        <Document/>
      </el-icon>
      简历管理
    </el-menu-item>
    <el-menu-item index="user">
      <el-icon :size="16">
        <User/>
      </el-icon>
      用户管理
    </el-menu-item>
    <el-menu-item index="classification">
      <el-icon :size="16">
        <Files/>
      </el-icon>
      分类管理
    </el-menu-item>
    <el-menu-item index="tag">
      <el-icon :size="16">
        <Discount/>
      </el-icon>
      标签管理
    </el-menu-item>
    <el-menu-item index="comment">
      <el-icon :size="16">
        <ChatDotSquare/>
      </el-icon>
      评论管理
    </el-menu-item>
    <el-sub-menu index="7">
      <template #title>
        <el-icon :size="16">
          <Folder/>
        </el-icon>
        运营管理
      </template>
      <el-menu-item index="7-1">
        <el-icon :size="16">
          <Calendar/>
        </el-icon>
        广告管理
      </el-menu-item>
      <el-menu-item index="notice">
        <el-icon :size="16">
          <Bell/>
        </el-icon>
        通知公告
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="8">
      <template #title>
        <el-icon :size="16">
          <Folder/>
        </el-icon>
        日志管理
      </template>
      <el-menu-item index="LoginLog">
        <el-icon :size="16">
          <More/>
        </el-icon>
        登录日志
      </el-menu-item>
      <el-menu-item index="opLog">
        <el-icon :size="16">
          <More/>
        </el-icon>
        操作日志
      </el-menu-item>
      <el-menu-item index="errorLog">
        <el-icon :size="16">
          <More/>
        </el-icon>
        错误日志
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="overview">
      <el-icon :size="16">
        <PieChart/>
      </el-icon>
      统计分析
    </el-menu-item>
    <el-menu-item index="sysInfo">
      <el-icon :size="16">
        <Warning/>
      </el-icon>
      系统信息
    </el-menu-item>
  </el-menu>
</template>



<script>
import { ref } from 'vue';
import {
  Bell,
  Calendar,
  ChatDotSquare,
  Discount,
  Document,
  Files,
  Folder,
  More,
  OfficeBuilding,
  PieChart,
  Setting,
  User,
  Warning
} from "@element-plus/icons-vue";
import { useRouter } from 'vue-router'; // 引入Vue Router的useRouter函数

export default {
  components: {
    Warning,
    PieChart,
    Bell, Calendar, Folder, Document, OfficeBuilding, More, ChatDotSquare, Discount, Files, Setting, User
  },
  setup() {
    const router = useRouter(); // 使用useRouter获取路由实例
    const activeMenu = ref('1'); // 使用ref定义响应式数据

    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath);
      router.push('/admin/'+key); // 使用router.push进行导航
    };

    return {
      activeMenu,
      handleSelect
    };
  },
};
</script>


<style scoped>
.el-menu-vertical-demo {
  width: 200px;
  height: 100%;
  margin-right: 10px;
  -webkit-user-select: none;
  user-select: none;
}
</style>
